<template>
	<el-dialog v-model="dialogVisible" :title="props.isAdd ? '添加供货商' : '编辑供货商'" width="50%" :before-close="handleClose">
		<div style="font-size: 14px; line-height: 30px">
			<el-form :model="form" label-width="150px" :rules="rules" ref="formRef">
				<el-form-item label="供货商名称：" prop="name">
					<el-input v-model="form.name" placeholder="请输入供货商名称"></el-input>
				</el-form-item>

				<el-form-item label="供货商联系方式：" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入供货商联系方式"></el-input>
				</el-form-item>

				<el-form-item label="供货商联系地址：" prop="address">
					<el-input v-model="form.address" placeholder="请输入联系地址"></el-input>
				</el-form-item>

				<el-form-item label="供货商归属平台：" prop="plant">
					<el-select v-model="form.plant" placeholder="请选择归属平台">
						<el-option label="闲鱼" :value="0"></el-option>
						<el-option label="校园" :value="1"></el-option>
						<el-option label="小红书" :value="2"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="营业执照：" prop="address">
					<el-upload
						:headers="uploadHeader"
						v-model:file-list="licenseShow"
						:action="uploadUrl"
						:data="{ fileCode: 'COMMON' }"
						list-type="picture-card"
						:on-success="handleSuccess"
						multiple
					>
						<el-icon>
							<Plus />
						</el-icon>
					</el-upload>
				</el-form-item>

				<el-form-item label="开户行：" prop="bank">
					<el-input v-model="form.bank" placeholder="请输入开户行"></el-input>
				</el-form-item>

				<el-form-item label="收款账户：" prop="account">
					<el-input v-model="form.account" placeholder="请输入收款账户"></el-input>
				</el-form-item>

				<el-form-item label="备注：" prop="remark">
					<el-input v-model="form.remark" placeholder="请输入备注"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="submit">提交</el-button>
				<el-button @click="handleClose">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, watch, reactive } from 'vue';
import { editSupplier, addSupplier } from '/@/api/api';
import { Session } from '/@/utils/storage';

const form = ref({});
const formRef = ref();
const loading = ref(false);
const uploadUrl = ref(import.meta.env.VITE_API_URL + 'common/upload');

const props = defineProps({
	// 列表内容
	dialogVisible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => {},
	},
	isAdd: {
		type: Boolean,
		default: () => true,
	},
});

watch(
	() => props.dialogVisible,
	(val) => {
		dialogVisible.value = val;
		licenseShow.value = [];

		if (val) {
			if (props.row) {
				form.value = JSON.parse(JSON.stringify(props.row));

				licenseShow.value.push({
					url: props.row.license,
					response: {
						data: {
							fileUrl: props.row.license,
						},
					},
				});
			}
		}
	}
);

const dialogVisible = ref(false);

const rules = reactive({
	name: [{ required: true, message: '请填写模板名称', trigger: 'blur' }],
	baseFreight: [{ required: true, message: '请填写基础运费', trigger: 'blur' }],
	additionalFreight: [{ required: true, message: '请填写特殊地区附加运费', trigger: 'blur' }],
	weight: [{ required: true, message: '请填写模板排序', trigger: 'blur' }],
});

const emit = defineEmits(['handleClose']);

function handleClose() {
	form.value = {};
	for (let key in form.value) {
		if (form.value.hasOwnProperty(key)) {
			delete form.value[key];
		}
	}
	emit('handleClose');
}
const uploadHeader = ref({
	'auth-token': `${Session.get('token')}`,
	'Cache-Control': 'no-cache',
});

const licenseShow = ref([]);
// 上传营业执照
const handleSuccess = (res) => {
	console.log('🚀 ~ handleInfoSuccess ~ res:', res);
	if (res.code == 200) {
		form.value.license = res.data.fileUrl;
	} else {
		ElMessage.error(res.msg);
	}
};

async function submit() {
	if (props.isAdd) {
		const { code } = await addSupplier(form.value);
		if (code === 200) {
			ElMessage.success('添加成功');
			handleClose();
		}
	} else {
		const { code } = await editSupplier(form.value);
		if (code === 200) {
			ElMessage.success('编辑成功');
			handleClose();
		}
	}
}
</script>

<style>
.desc_label {
	width: 20px;
}

.el-tree-node__content {
	height: 40px;
}

.select_all {
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	right: 30px;
	cursor: pointer;
}
</style>
